<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>allPerson</title>
</head>
<body>
<div id="title">查询结果、总数</div>
<div id="list">数据列表</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery -->
<script>
    $(document).ready(function() { // 当文档加载完成时执行
        listAllPersonOrderByUsername();
    });
    function listAllPersonOrderByUsername() {
        fetch('/hello/listAllPersonOrderByUsername') // 访问后端接口
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 在 title div 中显示查询结果和总数
                    document.getElementById('title').innerText = `查询结果[是否成功]：${data.success}，总数：${data.total}`;
                    // 遍历数据列表并显示在 list div 中
                    data.data.forEach(person => {
                        let personInfo =
                            `<p>
                            ID: ${person.id},
                            Name: ${person.name},
                            Username: ${person.username},
                            CreatorID: ${person.creatorid},
                            UpdaterID: ${person.updaterid},
                            Remark: ${person.remark},
                            CreateTime: ${person.createtime},
                            UpdateTime: ${person.updatetime}
                            </p>`;
                        document.getElementById('list').innerHTML += personInfo;
                    });
                }
            })
    }
</script>
